<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>1_引出生命周期</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel 将js转换成jsx -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- type="text/babel" 表示写的是 jsx 使用babel 翻译 -->
    <script type="text/babel">

        class Life extends React.Component{

            state = {
                opacity:1
            }

            death = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById("root"))
            }
            // 组件挂载完成后调用
            componentDidMount(){
                this.timer = setInterval(()=>{
                    let {opacity} = this.state;
                    opacity-=0.1
                    if(opacity<=0) opacity=1
                    this.setState({opacity})
                },200)
            }
            // 组件即将被卸载时候调用
            componentWillUnmount(){
                clearInterval(this.timer)
            }

            render(){
                return (
                    <div>
                        <h2 style={{opacity:this.state.opacity}}>React学不会怎么办</h2>
                        <button onClick={this.death}>不活了</button>
                    </div>
                );
            }
        }

        ReactDOM.render(<Life/>,document.getElementById("root"))


    </script>
  </body>
</html>
